import React from "react";
import styled from "styled-components";

import ImageStar from "../../assets/star/ImageStar";

import config from "../../config";

interface arrProps {
    title: string,
    source: string,
    group: string,
}

export const planeConfigs: arrProps[] = Array.from(Object.entries(config.plane)).map(item => {
    return {
        title: 's' + item[0].toUpperCase(),
        source: ImageStar.planeImages['s' + item[0].toUpperCase()],
        group: item[0],
    };
})
/*
[
    {
        title: "sCASH",
        source: ImageStar.sCASH,
        group: "cash",
    },
    {
        title: "sHT",
        source: ImageStar.sHT,
        group: "ht",
    },
    {
        title: "sNEO",
        source: ImageStar.sNEO,
        group: "neo",
    },
    {
        title: "sFILDA",
        source: ImageStar.sFILDA,
        group: "filda",
    },
    {
        title: "sNULS",
        source: ImageStar.sNULS,
        group: "nuls",
    },
    {
        title: "sCAN",
        source: ImageStar.sCAN,
        group: "can",
    },
    {
        title: "sFLM",
        source: ImageStar.sFLM,
        group: "flm",
    },
    {
        title: "sETH",
        source: ImageStar.sETH,
        group: "eth",
    },
    {
        title: "sBTC",
        source: ImageStar.sBTC,
        group: "btc",
    },
    {
        title: "sFIL",
        source: ImageStar.sFIL,
        group: "fil",
    },
    {
        title: "sDOT",
        source: ImageStar.sDOT,
        group: "dot",
    }
]
*/
interface HeaderProps {
    onItemChange?: (item: arrProps,index: number) => void,
    selected?: number,
}

const headerStyle = {backgroundColor: "transparent", width: '1000px'};
const StarHeader: React.FC<HeaderProps> = ({selected = 2, onItemChange}) => {
    const [select, setSelect] = React.useState(selected);
    const wrapRef = React.useRef(null);

    function changeIndex(index: number) {
        let x = 0;
        if (window.screen.width > 768) {
            if (index > 3) {
                x = (index + 1 - 3) * 150 + 3.5
            }
        }else {
            if (index > 0) {
                x = (index-1)*157+157/2
            }
        }

            wrapRef.current?.scrollTo({left: x, top: 0, behavior: "smooth"});
        setSelect(index);
        onItemChange(planeConfigs[index],index);
    }

    React.useEffect(()=>{
       setTimeout(()=>{
           if(window.screen.width<=768){
            //    wrapRef.current?.scrollTo({left:157/2,top:0});
            changeIndex(selected);
           }
       },0)
       
    },[])

    return (
        <div
            style={{
                width: '100%',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center'
            }}
        >
            <ChangeImage
                src={select == 0 ? ImageStar.left : ImageStar.leftHover}
                onClick={() => {
                    if (select > 0) {
                        changeIndex(select - 1);
                    }
                }}
            />
            <Wrap
                ref={wrapRef}
            >
                {planeConfigs.map((item, index) => {
                    return (
                        <Star
                            onPress={() => {
                                changeIndex(index)
                            }}
                            item={item}
                            selected={select == index}
                        ></Star>
                    )
                })}
                <StarBottom
                    selected={select}
                ></StarBottom>

            </Wrap>

            <ChangeImage
                src={select == planeConfigs.length - 1 ? ImageStar.right : ImageStar.rightHover}
                onClick={() => {
                    if (select < planeConfigs.length - 1) {
                        changeIndex(select + 1);
                    }
                }}
            />
        </div>
    )
}

interface StarProps {
    item: arrProps,
    selected: boolean,
    onPress?: () => void
}

interface StarWrapProps {
    selected?: boolean,
    onPress?: () => void
}

const Star: React.FC<StarProps> = ({item, selected, onPress}) => {
    return (
        <StarWrap
            selected={selected}
            onClick={onPress}
        >
            <StarImg
                src={item.source}
            ></StarImg>
            <StarTitle>{item.title}</StarTitle>
        </StarWrap>
    )
}
const Wrap = styled.div`
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  background-color:#2323e;
  position:relative;
  padding-top:30px;
  padding-bottom:30px;
  max-width:1000px;
  -webkit-overflow-scrolling: touch;
  ::-webkit-scrollbar {
    display: none;
  }
  margin-left:30px;
  margin-right:30px;
  @media (max-width: 768px) {
    
  }
`
const StarImg = styled.img`
    src:${props => props.src}
`
const ChangeImage = styled.img`
    src:${props => props.src};
    width:11px;
    height:23px;
   
`
const StarTitle = styled.div`
    font-size:18px;
    color:#ffffff;
`
const StarWrap = styled.div<StarWrapProps>`
    text-align:center;
    opacity:${props => props.selected ? 1 : 0.1};
`
const StarBottom = styled.div<HeaderProps>`
    position:absolute;
    left:0px;
    bottom:0px;
    width:150px;
    height:2px;
    background-color:#fa4e32;
    transform:translateX(${props => props.selected * 150 + 3.5 + props.selected * 7}px);
    transition-duration: 0.5s;
    @media (max-width: 768px) {
    display: none;
  }
`
export default StarHeader;
